<template>
  <div class="home">
    <div class="es">
      <!--搜索-->
      <div class="es-search">
        <div style="margin:10px auto;width: 50%;">
          <el-input placeholder="请输入查询内容" v-model="keyword" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click.prevent="searchKey"></el-button>
          </el-input>
        </div>

        <div class="block" style="margin:10px auto;width: 70%;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[50,50,100, 200, 300,500]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

        <table id="example" class="table-bordered" style="margin:70px 5px 5px 5px;">
          <tbody>
          <!--满足4条数据换行-->
          <tr v-for="(result,index) in results" v-if="index%5==0">
            <th v-for="i in 5" v-if="results[i-1+index] != null"
                style="border: #b4bccc 1px solid;width:18%;font-weight: normal;">
              <!--              {{ results[i-1+index].title }}-->
              <div style="text-align: center" v-html="results[i-1+index].title" class="iconfont icon-shu1">
              </div>
              <div style="text-align: center" v-html="results[i-1+index].author">
              </div>
              <div style="text-align: left" v-html="results[i-1+index].content">
              </div>
            </th>
          </tr>
          </tbody>
        </table>

      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        username: localStorage.getItem('username'),
        keyword: '',
        results: [],
        pageNo: 1,
        pageSize: 30,
        currentPage: 1,
        total: 0
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;

        this.searchKey();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNo = val;

        this.searchKey();
      },
      searchKey() {
        let that = this;
        this.$axios.get('/poem/search', {
          params: {
            keyword: that.keyword,
            pageNo: that.pageNo,
            pageSize: that.pageSize
          }
        }, {
          emulateJSON: true
        }).then(res => {
          console.log('result:', res.data.result)
          that.total = res.data.total;
          that.results = res.data.result;
        })

      }
    },
    // mounted() {
    //   this.searchKey();
    // },
    //在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
    activated() {
      console.log('this.$route.query.keyword:', this.$route.query.keyword)
      if (this.$route.query.keyword) {

        //接受参数
        this.keyword = this.$route.query.keyword;
      }
      this.searchKey();
    }
  }
</script>

<style scoped lang="less">
  .home {
    height: calc(~'100% - 40px');
  }

  .es {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .es-search {
    position: relative;
    width: 100%;
    background-color: @boxBgColor;
    box-shadow: 2px 2px 5px #ccc;
    overflow-y: auto;
  }

  .el-select .el-input {
    width: 30px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
